<template>
  <div class="zwdj">
    <DaoHanginPage/>
    
    <!-- 新增的许可证信息显示页面 -->
    <div v-if="showPermitInfo" class="permit-info-container">
      <div class="section-header">
        <h3>准许种植产品信息</h3>
        <div class="header-buttons">
          <el-button @click="goToAlliInformation" type="primary">添加准许种植产品</el-button>
          <el-button @click="refreshData" type="info">刷新数据</el-button>
        </div>
      </div>
      
      <div v-if="loading" class="loading-container">
        <el-loading :loading="true" text="加载中..."></el-loading>
      </div>
      
      <div v-else-if="permitList.length > 0" class="permit-list">
        <div v-for="(permit, index) in permitList" :key="index" class="permit-item">
          <div class="permit-info">
            <div class="permit-info-row">
              <p><strong>产品名称:</strong> {{ permit.productName }}</p>
              <p><strong>产品类别:</strong> {{ permit.productCategory }}</p>
            </div>
            <div class="permit-info-row">
              <p><strong>品种:</strong> {{ permit.variety }}</p>
              <p><strong>种植周期:</strong> {{ permit.plantingCycle }}天</p>
            </div>
            <div class="permit-info-row">
            <p><strong>审核状态:</strong> 
              <el-tag :type="getStatusType(permit.auditStatus)">{{ permit.auditStatus }}</el-tag>
            </p>
            
            <p><strong>种植备案号:</strong> {{ permit.plantingRecordNumber }}</p>
          </div>
          <div class="permit-info-row">
            <div class="permit-info-row">
<p v-if="permit.auditStatus === '审核驳回'" style="color: red;">
              <strong>审核意见:</strong> {{ permit.rejectReason }}
              <el-button type="text" @click="editRejectedPermit(permit)">重新编辑</el-button>
            </p>
            </div>
          </div>
          </div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        />
      </div>
      
      <div v-else class="no-data">
        <p>暂无准许种植产品信息</p>
      </div>
    </div>
    
    <!-- 原有的AlliInformation组件 -->
    <AlliInformation v-if="!showPermitInfo" @back-to-list="showPermitInfo = true" :initialPermitData="editingPermitData"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElPagination } from 'element-plus'
import DaoHanginPage from '@/components/ncpsy/ZSPT/DaoHanginPage/DaoHanginPage.vue';
import AlliInformation from '@/components/ncpsy/ZSPT/ZWDJ/AlliInformation.vue';
import { listPermit } from '@/api/ncpsy/management/permit';
import useUserStore from '@/store/modules/user';

// 获取用户store
const userStore = useUserStore();
const userId = userStore.id;

// 控制显示哪个页面
const showPermitInfo = ref(true);
const editingPermitData = ref(null);

// 许可证数据
const permitList = ref([]);
const loading = ref(false);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取许可证列表
const fetchPermitList = async () => {
  loading.value = true;
  try {
    const response = await listPermit({ userId, pageNum: currentPage.value, pageSize: pageSize.value });
    if (response && response.rows) {
      permitList.value = response.rows;
      total.value = response.total;
    } else {
      permitList.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取许可证列表失败:', error);
    ElMessage.error('获取许可证列表失败: ' + (error.message || '未知错误'));
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const refreshData = () => {
  fetchPermitList();
};

// 处理每页显示数量改变
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchPermitList();
};

// 处理当前页码改变
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchPermitList();
};

// 跳转到AlliInformation页面
const goToAlliInformation = () => {
  showPermitInfo.value = false;
};

// 编辑驳回的许可证信息
const editRejectedPermit = (permit) => {
  editingPermitData.value = permit;
  showPermitInfo.value = false;
};

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case '已通过':
      return 'success';
    case '待审核':
      return 'warning';
    case '已拒绝':
      return 'danger';
    default:
      return 'info';
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchPermitList();
});
</script>

<style scoped>
.zwdj{
  padding: 20px;
}

.permit-info-container {
  margin: 20px auto;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: rgba(209, 209, 209, 0.438) 5px 5px 10px;
}

.section-header {
  margin: 30px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.permit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.permit-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.permit-info p {
  margin: 8px 0;
}

.permit-info-row {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 调整间距 */
}

.permit-info-row p {
  flex: 1;
  margin: 8px 0;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>